<template>
<el-row>
    <el-col :span="24">
        <div class="head-wrap">百助下载器后台数据展示</div>
        <div style="display:inline-block;float:right;">
            <div class="loginOut" @click="loginOut">退出登录</div>
            <div class="loginName">{{nickname}}</div>
        </div>
    </el-col>
</el-row>
</template>

<script>
export default {
    data() {
        return {
            getLoginOutUrl:'' + this.$store.state.domain + '/bzDCP/login/removeuser',
            nickname: '',
        }
    },
    created() {
        this.nickname = this.$store.state.loginStat.nickname;
        this.username = this.$store.state.loginStat.username;
    },
    methods: {
        loginOut() {
            this.$ajax.post(this.getLoginOutUrl, this.qs.stringify({
                username: this.username
            })).then(response => {
                if (response.data.code == 200) {
                    this.$notify({
                        title: '提示信息',
                        message: '退出成功',
                        type: 'success'
                    });
                    this.$store.state.loginStat = {};
                    this.$router.push({
                        path: '/login'
                    })
                } else {
                    this.$notify({
                        title: '提示信息',
                        message: '退出失败',
                        type: 'error'
                    });
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
    }
}
</script>

<style scoped>
.head-wrap {
    font-size: 28px;
    display: inline-block;
}

.loginOut {
    float: right;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 27px;
    margin: 12px;
    cursor: pointer;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.loginOut:active {
    outline: none;
    border-color: #409eff;
}

.loginName:active {
    outline: none;
    border-color: #409eff;
    
}

.loginName {
    display: inline-block;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 27px;
    margin: 12px;
    cursor: pointer;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}
</style>
